<template>
<el-card class="box-card">
   <span style="color:#8df">夏帅帅</span>
  <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
    <span style="margin-right:10px">关键字</span>
    <el-input style="width:80%" v-model="serchkey.keyword" placeholder="请输入内容"></el-input>
  </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    <span style="margin-right:10px">状态</span>
    <el-select style="width:80%" v-model="serchkey.state" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    <el-button @click="toclear">清除</el-button>
    <el-button type="primary" @click="toserch">搜索</el-button>
  </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    <el-button @click="addnewlist" style="margin-left:250px" type="success" icon="el-icon-edit">新增技巧</el-button>
  </div></el-col>
</el-row>
<p class="info">
  <i style="margin:0 10px" class='el-icon-info'></i>
  <!-- <span v-if="serchkey.serchkey!==''">数据一共{{tableData.length}}条</span> -->
  <span >数据一共{{countlength}}条</span>
</p>
<!-- 表格数据 -->
 <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
       type="index"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="文章标题"
        width="300">
        <template slot-scope="scope">
          <div>
            <span>{{scope.row.title}}</span>
            <i id="isizi" @click="olayervideo(scope.row)" v-if="scope.row.videoURL!==''&&scope.row.videoURL!==null" class="iconfont icon-film"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="visits"
        label="阅读数">
      </el-table-column>
      <el-table-column
        prop="username"
        label="录入人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="录入时间"
        width="180">
        <template slot-scope="scope">
          {{scope.row.createTime|parseTimeByString}}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="状态"
        width="180">
      <template slot-scope="scope">
          {{scope.row.state|updatastate}}
      </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="操作"
        >
      <template slot-scope="scope">
        <el-button type="text" @click="tolook(scope.row)">预览</el-button>
        <el-button @click="getchagestate(scope.row)"  type="text">{{scope.row.state===1?'禁用':'启用'}}</el-button>
        <el-button :disabled='scope.row.state===0' type="text" @click="tochangelist(scope.row)">修改</el-button>
        <el-button :disabled='scope.row.state===0' type="text" @click="todelete(scope.row)">删除</el-button>
      </template>

      </el-table-column>
    </el-table>
    <!-- 分页 -->
 <el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage4"
  :page-sizes="[ 10, 20, 30]"
  :page-size="100"
  layout=" sizes, prev, pager, next, jumper"
  :total="countlength">
</el-pagination>
    <!-- 预览文章 -->
    <el-dialog
      title="预览文章"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <p style="font-weight: 700;">{{nocelist.title}}</p>
      <div>
        <span >{{nocelist.createTime|parseTimeByString}}</span>
        <span style="margin:0 10px">{{nocelist.username}}</span>
        <i class="el-icon-view"></i>
        <span style="margin-left:10px">{{nocelist.visits}}</span>
      </div>
       <el-divider></el-divider>
      <el-main class="articleBody"><p >{{nocelist.articleBody|html2Text}}</p></el-main>
    </el-dialog>
    <!-- 修改文章 -->
    <el-dialog
      title="提示"
      :visible.sync="showchange"
      width="80%"
      >
      <el-form ref="form" :model="oncechangelist" label-width="80px">
        <el-form-item label="活动名称:">
          <el-input v-model="oncechangelist.title"></el-input>
        </el-form-item>
        <el-form-item label="活动内容:">
          <quill-editor ref="myTextEditor" v-model="oncechangelist.articleBody" :options="editorOption" style="height:300px;"></quill-editor>
        </el-form-item>
        <el-form-item style="margin-top:80px" label="视频地址:">
          <el-input v-model="oncechangelist.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showchange = false">取 消</el-button>
        <el-button type="primary" @click="onlickchangelist">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增文章 -->
      <div id="addtitle">
       <el-dialog
      title="提示"
      :visible.sync="showaddchange"
      width="80%"
      @close='closedialog'
      >
      <el-form ref="form" :rules="rules" :model="addlist" label-width="80px">
        <el-form-item prop="title" label="活动名称">
          <el-input  v-model="addlist.title"></el-input>
        </el-form-item>
        <el-form-item prop="articleBody" label="活动内容">
          <quill-editor ref="myTextEditor" v-model="addlist.articleBody" :options="editorOption" style="height:300px;"></quill-editor>
        </el-form-item>
        <el-form-item style="margin-top:80px" label="视频地址:">
          <el-input v-model="addlist.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showaddchange = false">取 消</el-button>
        <el-button type="primary" @click="onlickaddchangelist">确 定</el-button>
      </span>
    </el-dialog>
      </div>
    <!-- 视频播放 -->
    <div id="videoplay">
      <el-dialog
      :visible.sync="videoshow"
      width="50%"
      :show-close=false
      destroy-on-close
      modal-append-to-body
      fullscreen
      class="videodialog"

      >

      <el-button @click="deletevideo"  class="sizibtn" type="info" icon="el-icon-circle-close" circle></el-button>
        <div style="width:50%;margin-left:25%; position: relative;">
          <video1 @showchange='showchangecanvas' @changeshow='changeshow'  v-if="videoshow"  :src='videosrc'></video1>
          <canvas v-show="showcanvas" style="  width: 10px;height: 10px;" id="qrcode" />
        </div>

  </el-dialog>
    </div>

</el-card>
</template>

<script>
import { add, list, remove, update, changeState } from '../../api/hmmm/articles'
import video1 from '../components/video.vue'
import QRCode from 'qrcode'
export default {
  components: {
    video1
  },
  data () {
    return {
      showcanvas: true,
      currentPage4: 1,
      videoshow: false,
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      addlist: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      showaddchange: false,
      editorOption: {},
      form: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      changelist: {
        title: ''
      },
      showchange: false,
      dialogVisible: false,
      options: [{
        value: '1',
        label: '启用'
      }, {
        value: '0',
        label: '禁用'
      }],
      serchkey: {
        serchkey: '',
        keyword: ''
      },
      tableData: [],
      countlength: null,
      nocelist: {},
      oncechangelist: {},
      state: null,
      videosrc: ''
    }
  },

  created () {
    this.getalllst()
  },

  methods: {
    async getalllst () {
      const res = await list()
      this.tableData = res.data.items
      console.log(res)
      this.countlength = res.data.counts
    },
    async toserch () {
      this.serchkey.serchkey = parseInt(this.serchkey.serchkey)
      const res = await list(this.serchkey)
      console.log(res)
      this.tableData = res.data.items
      this.countlength = res.data.counts
    },
    toclear () {
      this.serchkey = {
        serchkey: '',
        keyword: ''
      }
      this.getalllst()
    },
    tolook (row) {
      this.dialogVisible = true
      console.log(row)
      this.nocelist = row
    },
    async todelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove(row)
          this.getalllst()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    tochangelist (row) {
      this.showchange = true
      this.oncechangelist = row
    },
    async onlickchangelist () {
      this.showchange = false
      try {
        await update(this.oncechangelist)
        this.getalllst()
        this.$message.success('操作成功')
      } catch (err) {
        console.log(err)
      }
    },
    getchagestate (row) {
      this.$confirm(row.state === 1 ? '此操作将禁用该文件, 是否继续?' : '此操作将启用该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          if (row.state === 1) {
            this.state = 0
          } else if (row.state === 0) {
            this.state = 1
          }
          await changeState({ id: row.id, state: this.state })
          this.getalllst()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async onlickaddchangelist () {
      try {
        await this.$refs.form.validate()
        await add(this.addlist)
        this.getalllst()
        this.showaddchange = false
        this.$message.success('操作成功')
      } catch (err) {
        console.log(err)
      }
    },
    addnewlist () {
      this.showaddchange = true
    },
    closedialog () {
      this.$refs.form.resetFields()
      this.addlist.videoURL = ''
    },
    olayervideo (row) {
      this.videoshow = true
      this.videosrc = row.videoURL
      console.log(row)
      if (!row.videoURL) return this.$message.error('该组没有视频解析')
      // 数据变了 数据驱动视图>异步的
      this.qrcodeDialog = true

      // 等视图更新
      this.$nextTick(() => {
        const canvas = document.getElementById('qrcode')
        QRCode.toCanvas(canvas, row.videoURL, function (error) {
          if (error) return this.$message.error('生成失败')
        })
      })
    },
    deletevideo () {
      this.videoshow = false
    },
    async handleSizeChange (val) {
      console.log(this.serchkey.state)
      console.log(`每页 ${val} 条`)
      const res = await list({ pagesize: val, state: this.serchkey.state, keyword: this.serchkey.keyword })
      this.tableData = res.data.items
    },
    async handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      const res = await list({ page: val, keyword: this.serchkey.keyword, state: this.serchkey.state })
      this.tableData = res.data.items
      console.log(res)
    },
    changeshow () {
      this.showcanvas = false
    },
    showchangecanvas () {
      this.showcanvas = true
    }
  }
}
</script>

<style scoped lang='less'>
.info{
  width: 100%;
  background-color: #f4f4f5;
  height: 35px;
  line-height: 35px;
  color: #909399;

}
.articleBody{
  background-color: #f5f5f5;
}
/deep/#videoplay{
  .el-dialog{
  background-color: rgba(0,0,0,0);
  border:none;
}
.el-dialog__header{
  background-color: rgba(0,0,0,0);
}
}

/deep/.sizibtn{
  width: 200px;
  height: 200px;
  font-size: 100px;
  line-height: 200px;
  background-color: rgba(0,0,0,0);
  border: none;
  margin-left:45%;
  color: #8df;
}
/deep/#qrcode{
  position: absolute;
  top: 0;
  left: 770px;
  }
  /deep/#isizi{
    font-size: 20px;
    color: #0000ff;
  }
</style>
